<template>
  <div>
    <el-dialog
      :title="$t('LineManagementLang.Multi_Language')"
      :visible.sync="Visible"
      width="50%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div ref="LineManagement_setInsuranceText" class="dialogBox">
        <div class="dialogBoxItem">
          <div class="dialogBoxItemRow">
            <div class="title">{{$t('LineManagementLang.Insurance_Text_zh')}}:</div>
            <div class="contant">
              <el-input
                :disabled="typeName==='details'"
                ref="Insurance_text_zh"
                @blur="handleBlur('Insurance_text_zh',$event)"
                @focus="handleFocus($event)"
                class="Required"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.Insurance_text_zh"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div class="dialogBoxItemRow">
            <div class="title">{{$t('LineManagementLang.Insurance_Text_en')}}:</div>
            <div class="contant">
              <el-input
                :disabled="typeName==='details'"
                ref="Insurance_text_en"
                @blur="handleBlur('Insurance_text_en',$event)"
                @focus="handleFocus($event)"
                class="Required"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.Insurance_text_en"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="dialogBoxItem">
          <div class="dialogBoxItemRow">
            <div class="title">{{$t('LineManagementLang.Insurance_Text_ru')}}:</div>
            <div class="contant">
              <el-input
                :disabled="typeName==='details'"
                ref="Insurance_text_ru"
                @blur="handleBlur('Insurance_text_ru',$event)"
                @focus="handleFocus($event)"
                class="Required"
                :placeholder="$t('common.input_plactholder')"
                v-model="data.Insurance_text_ru"
              ></el-input>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="typeName!=='details'" type="primary" @click="confirm" size="small"
          >{{$t('common.confirm')}}</el-button
        >
        <el-button @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 接收绑定参数
    
  },
  data() {
    return {
      Visible: false,
      typeName:'',
      data: {
        Insurance_text_zh: "",
        Insurance_text_en: "",
        Insurance_text_ru: "",
      },
      confirmTrue: true, //确定按钮保护
    };
  },
  created() {
   
  },
  mounted() {},
  watch: {},
  methods: {
    init(data,typeName) {
      this.typeName=typeName
      this.data=data
      this.Visible = true;
    },
    // 提交
    confirm() {
      //是否有空值必选项标识
      let type = true;
      //输入框判断是否有值
      if(!this.data.Insurance_text_zh){
        this.$refs.Insurance_text_zh.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.Insurance_text_en){
        this.$refs.Insurance_text_en.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if(!this.data.Insurance_text_ru){
        this.$refs.Insurance_text_ru.$el.childNodes[1].style.border='1px solid red'
        type=false
      }
      if (type) {
        this.$emit("success",this.data);
        this.cancel()
      }
    },
    //取消
    cancel() {
      this.data = {
        Insurance_text_zh: "",
        Insurance_text_en: "",
        Insurance_text_ru: "",
      };
      this.$emit("cancel");
      this.Visible = false;
      
      let dom = this.$refs.LineManagement_setInsuranceText.getElementsByClassName("el-input__inner");
      for (let i = 0; i < dom.length; i++) {
         dom[i].style.border = "1px solid #E0E3E9";
      }
    },
    //输入框、下拉框失去焦点边框变色
    handleBlur(name, event) {
      if (!this.data[name]&&this.data[name]!==0) {
        event.target.style.border = "1px solid red";
      }
    },
    //输入框、下拉框获取焦点边框变色
    handleFocus(event) {
      event.target.style.border = "1px solid #E0E3E9";
    },
  },
};
</script>

<style scoped lang="less" >
  .dialogBox .dialogBoxItem .dialogBoxItemRow{
    width: 100%;
  } 
  /deep/ .el-dialog__wrapper{
    .el-dialog{
      min-width: 500px;
    }
  }
</style>